<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div>
        <el-dialog title="图片搬家" :visible.sync="show" :close-on-click-modal="false" :close-on-press-escape="false" width="880px"
            append-to-body v-loading="loading" :element-loading-text="loading_text">
            <div class="input-section">
                <div class="input-label">网页地址:</div>
                <el-input size="small" placeholder="输入网址，马上爬取图片" class="input-field" v-model="current_url"></el-input>
                <el-button size="small" type="primary" icon="el-icon-search" @click="getImgs">开始</el-button>
            </div>

            <div class="image-container">
                <div v-for="(item, index) in items" :key="index" style="display: flex;flex-direction: column;align-items: center;">
                    <div class="image-item" :style="{ borderColor: item.selected ? '#5cb6ff' : '' }"
                        @click="selectItem(item, index)">
                        <el-image class="image" :src="item.url" fit="scale-down" />
                        <i class="el-icon-success" v-if="item.selected"
                            style="position: absolute;color: #5cb6ff;bottom: -2px;right: -2px;"></i>
                    </div>
                    <div class="item-name" :style="{ color: item.selected ? '#5cb6ff' : '' }">{{ item.name }}</div>
                </div>
                <div v-if="!current_url && !items.length" class="no-data">请先输入要爬取的网址</div>
            </div>

            <el-checkbox :indeterminate="isIndeterminate" v-model="check_all"
                @change="handleCheckAllChange">全选</el-checkbox>

            <div class="footer" slot="footer">
                <el-button size="mini" @click="show = false" icon="el-icon-close">取消</el-button>
                <el-button size="mini" type="primary" @click="submitHandle" icon="el-icon-check">确定</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
import { getImgList, upImg } from "@/api/picture-copy";
import {
    getMediaFiles,
    deleteMediaFile,
    updateMediaFile,
    createMediaFile,
} from "@/api/media";
export default {
    name: 'pictureCopyPopup',
    data() {
        return {
            show: false,
            loading: false,
            loading_text: '',
            current_url: '',
            items: [],
            // isIndeterminate: false,
            check_all: false,
            // 需要上传的图片条数
            upload_count: 0,
            // 已经上传的图片条数
            upload_success_count: 0,
            // 上传失败的图片条数
            upload_fail_count: 0,
        };
    },
    props: {
        parentId: null
    },
    components: {},

    computed: {
        isIndeterminate: function () {
            if (this.items.length == 0) {
                return false;
            }
            var checkedlength = this.items.filter((item, i) => {
                return item.selected;
            }).length;
            if (checkedlength == 0) {
                return false;
            }
            var notcheckedlength = this.items.filter((item, i) => {
                return !item.selected;
            }).length;
            if (notcheckedlength == 0) {
                return false;
            }
            return true;
        }
    },

    watch: {
        show: function (val) {
            if (!val) {
                this.loading_text = ''
                this.loading = false
                this.items = []
                this.current_url = ''
                this.upload_count = 0
                this.check_all = false
                this.upload_success_count = 0
            }
        },
    },

    mounted() {

    },

    methods: {
        showPopup() {
            this.show = true;
        },
        selectItem(item, index) {
            var arr = this.items;
            item.selected = !item.selected;
            arr[index] = item;
            this.items = arr;
            var checkedlength = this.items.filter((item, i) => {
                return item.selected;
            }).length;
            if (checkedlength == this.items.length) {
                this.checked_all = true;
            }
        },
        handleCheckAllChange() {
            if (this.checked_all) {
                this.items.forEach((item, i) => {
                    item.selected = false;
                });
                this.checked_all = false;
            } else {
                this.items.forEach((item, i) => {
                    item.selected = true;
                });
                this.checked_all = true;
            }
        },
        getImgs() {
            if (!this.current_url) {
                this.$message.error('请输入目标网址');
                return
            }
            this.loading = true;
            this.loading_text = '正在获取图片';
            getImgList({ url: this.current_url }).then(res => {
                this.loading = false;
                this.loading_text = '';
                if (res.code != 0) {
                    return
                }
                var arr = res.data.map(item => {
                    item.selected = false;
                    return item;
                });
                var oldarr = this.items;

                this.items = oldarr.concat(arr);
            })
        },
        upImageUrl(url) {
            var _this = this;
            var data = { img_url: url }
            upImg(data).then(res => {
                if (res.code != 0) {
                    _this.updateCount('fail')
                    return
                }

                createMediaFile({
                    url: res.data.url,
                    size: res.data.size,
                    filename: res.data.filename,
                    parent_id: _this.parentId,
                    filetype: res.data.content_type.split("/")[0],
                }).then((res) => {
                    if (res.code != 0) {
                        _this.updateCount('fail')
                        return
                    }
                    _this.updateCount('success')
                }).catch(err => {
                    _this.updateCount('fail')
                })

            }).catch(err => {
                _this.updateCount('fail')
            })
        },
        updateCount(type){
            if(type == 'success'){
                this.upload_success_count = this.upload_success_count + 1
            }else{
                this.upload_fail_count = this.upload_fail_count + 1
            }
            this.loading_text = '上传中，当前进度：' + (this.upload_success_count + this.upload_fail_count) + '/' + this.upload_count + '，失败数：' + this.upload_fail_count
            if(this.upload_success_count + this.upload_fail_count == this.upload_count){
                this.$message.success('上传完成')
                this.show = false
                this.$emit('success')
            }

        },
        submitHandle() {
            var arr = this.items.filter((item, i) => {
                return item.selected;
            })
            if (arr.length == 0) {
                this.$message.error('请选择要上传的图片')
                return
            }
            this.loading = true
            this.upload_count = arr.length
            this.loading_text = '上传中，当前进度：' + this.upload_success_count + '/' + this.upload_count + '，失败数：' + this.upload_fail_count
            arr.forEach(item => {
                this.upImageUrl(item.url)
            })
        }
    }
}
</script>

<style scoped>
.input-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.input-label {
    flex: 0 0 auto;
}

.input-field {
    width: 65%;
}

.image-container {
    width: 100%;
    height: 400px;
    border: 2px solid #e1e1e1;
    margin: 20px 0;
    border-radius: 5px;
    padding: 20px 10px 20px 20px;
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    align-content: flex-start;
}

/* 滚动条轨道 */
.image-container::-webkit-scrollbar {
    width: 6px; /* 滚动条宽度 */
}

/* 滚动条滑块 */
.image-container::-webkit-scrollbar-thumb {
    background-color: #888; /* 滑块颜色 */
    border-radius: 3px; /* 滑块圆角 */
}

/* 滚动条轨道上的轨道部分 */
.image-container::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* 轨道颜色 */
}



.image-item {
    width: 70px;
    height: 70px;
    border: 1px solid #eee;
    margin: 6px 20px 0px 10px;
    position: relative;
}
.item-name {
    text-align: center;
    font-size: 10px;
    padding-top: 5px;
    width: 70px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 10px;
}

.image {
    width: 68px;
    height: 68px;
}

.no-data {
    text-align: center;
    width: 100%;
    color: #b8b8b8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer {
    margin-top: 20px;
    text-align: right;
}
</style>